// 引入样式
require("./mine_data.less");
// 引入echarts
import * as echarts from "echarts";
let axios = require("axios");
window.addEventListener("load", async function () {
	// 获取方法
	function $(v) {
		return document.querySelector(v);
	}

	// 获取数据
	axios.defaults.baseURL = "http://fitness.h5.itsource.cn:3701";
	let token = localStorage.getItem("token");
	axios.defaults.headers.common["Authorization"] = "Bearer " + token;
	let v = await axios.get("/api/exercise");
	console.log(v.data.data);
	// 获取运动数据
	let data = v.data.data.days;
	console.log(data);
	// 七天运动时长
	let Duration = data.map((v) => v.sumDuration);
	// 运动日期
	let date = data.map((v) => v.date.slice(5));
	// 三种运动的时长
	// 跑步
	let run = 0;
	data.forEach((v) => {
		run += v.exerciseData[0].duration;
	});
	let run1 = data.map((v) => v.sumCalorie);
	// 骑车
	let ride = 0;
	data.forEach((v) => {
		ride += v.exerciseData[1].duration;
	});
	let ride1 = data.map((v) => v.sumCalorie);
	// 训练
	let train = 0;
	data.forEach((v) => {
		train += v.exerciseData[2].duration;
	});
	let train1 = data.map((v) => v.sumCalorie);
	// 七天的训练次数
	let time = data.map((v) => {
		return v.count;
	});

	$("#num1").textContent = v.data.data.sum7Duration;
	$("#num2").textContent = v.data.data.sum7Calorie;
	$("#num3").textContent = v.data.data.sum7Calorie;

	$("#back").addEventListener("click", function () {
		location.href = "./mine.html";
	});
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init($("#histogram"));
	// 第一个柱状图
	myChart.setOption({
		title: {
			text: "近七天运动数据",
			left: 20,
			top: 10,
		},
		xAxis: {
			type: "category",
			data: date,
		},
		grid: {
			left: 50,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: Duration,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
	});
	// 饼图
	var myChart2 = echarts.init($("#pie"));
	// 绘制图表
	myChart2.setOption({
		title: {
			text: "运动时长",
			left: 20,
			top: 10,
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			orient: "vertical",
			left: "left",
			top: "center",
			left: 20,
		},

		series: [
			{
				name: "近七日运动数据",
				type: "pie",
				radius: "80%",
				left: 100,
				data: [
					{ value: run, name: "跑步" },
					{ value: ride, name: "骑行" },
					{ value: train, name: "训练" },
				],

				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				label: {
					position: "inside",
					formatter: "{d}%",
				},
			},
		],
	});
	// 堆叠柱状图
	var myChart3 = echarts.init($("#box2"));
	// 绘制图表
	myChart3.setOption({
		title: {
			text: "消耗卡路里",
			left: 20,
			top: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			right: 0,
			top: 30,
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: date,
		},
		series: [
			{
				name: "Direct",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: run1,
			},
			{
				name: "Mail Ad",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: ride1,
			},
			{
				name: "Affiliate Ad",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: train1,
			},
		],
	});
	// 折线图
	var myChart4 = echarts.init($("#box3"));
	// 绘制图表
	myChart4.setOption({
		title: {
			text: "近七日训练次数",
			left: 20,
			top: 10,
		},
		xAxis: {
			type: "category",
			data: date,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: time,
				type: "line",
			},
		],
	});
});
